CSS自定义 插件样式

用于定义 MySnippet 插件的状态栏菜单及其内部滚动菜单，并提供一个流畅的列布局，同时确保菜单在屏幕上有一个合理的最大高度和最小宽度。

241218Obsidian插件样式：MySnippets的多栏布局.md 用于定义 MySnippet 插件的状态栏菜单及其内部滚动菜单，并提供一个流畅的列布局，同时确保菜单在屏幕上有一个合理的最大高度和最小宽度。

熊猫别熬夜

Pkmer

更多

💻教程 文件夹管理

优化文件浏览器的显示

怎么打造一个干净且有条理的文件浏览器，效果如图：  分为几个步骤： 1. 隐藏不必要的文件夹 2. 添加分隔线 3. （可选）调整排序 原理是根据左侧列表元素的 data-path 来隐藏文件/文件夹。 想要隐藏更多，只要添加 .nav-folder:has([data-path="你想隐藏的文件名"]), 即可。 你也可以用 data-path="hide-"，这样所有的名字里带有 hide- 的文件或文件

Moy

Pkmer

更多

美化样式 CSS自定义

自定义链接前缀图标

该样式会根据前缀来给不同格式的文档添加前缀图标： 通过 .internal-link[href=".pdf"]::before 匹配不同文件类型格式，通过修改 content:url() 里面的 SVG 数据的内容可以定义不同文件类型的图标。 css / 如何配置图标参考： Obsidian 样式：美化自定义文件夹图标/ /内部链接/ .internal-link::before { content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='n

熊猫别熬夜

Pkmer

更多

图片 CSS自定义

Obsidian 样式 - 调整图片不同布局样式，将图片渲染为圆形或者控制图片在文本的左侧或者右侧，可组合。

在整理侧边栏索引界面时，@熊猫别熬夜 帮忙写了一个让图片变圆的 css，后面@熊猫别熬夜 拓展了用法，目前能支持的功能包括： 1. 将图片渲染为圆形。 2. 控制图片在文本的左侧或者右侧。 这两个效果在功能上不会冲突，允许同时使用 注：以下测试图片来自：英国 1927 剧团的话剧《roots》的剧照 Obsidian 样式 - 调整图片不同布局样式 Obsidian 样式 - 调整图片不同布局样式

余月鱼鸽,熊猫别熬夜

Pkmer

更多

CSS自定义

破折号作者自动右对齐

效果预览：左边是源文本，右边是在 obsidian 中的显示效果，破折号及其之后的内容自动右对齐  安装 regex-mark 插件，按如下配置 ——.，dashright  添加 css （待完善，regex-mark 插件教程和使用示例，可先学习 Dynamic-Highlights插件的几种使用场景

calmwaves

Pkmer

更多

侧边栏 CSS自定义

悬浮侧边栏自动弹出，提升工作流效率

介绍一个 “悬浮侧边栏自动弹出” 的 CSS，它通过添加悬浮侧边栏和自动弹出功能。 自动悬浮两侧菜单栏的效果： 2024-04-04Obsidian样式-悬浮侧边栏自动弹出，提升工作流效率IMG-1900 1. 悬浮侧边栏：该 CSS 添加了一个悬浮侧边栏，使用户可以随时访问常用的工具和功能，无需切换页面或使用键盘快捷键。 2. 自动弹出：当用户进入 Obsidian 编辑器或切换到特定工作区时，悬浮侧边栏会自动弹出，节省了手动打开的步骤，提高了工作效率。 3. 可调整的透明度：用户可以根据自己的喜好，调整悬浮侧边栏的透明度，

熊猫别熬夜

Pkmer

更多

properties CSS自定义

该 CSS 用来详细调节 Yaml 在编辑模式、阅读模式和源码模式下的显示状态，您可以通过 Style Setting 插件灵活地控制 Yaml 的显示状态，使编辑、阅读和查看源码时更符合您的需求。

该 CSS 用来详细调节 Yaml 在编辑模式、阅读模式和源码模式下的显示状态，您可以通过 Style Setting 插件灵活地控制 Yaml 的显示状态，使编辑、阅读和查看源码时更符合您的需求。 2024-04-07Obsidian样式-控制属性面板(YAML)的显示状态IMG-1 2024-04-07Obsidian样式-控制属性面板(YAML)的显示状态IMG-4 css / @settings name: 【Properties】控制Yaml的显示情况 id: 【Properties】控制Yaml的显示情况 sett

熊猫别熬夜

Pkmer

更多

CSS自定义 标签页

模仿Colorful Note Borders插件，针对激活的窗口进行添加边框

模仿 Colorful Note Borders 插件，针对激活的窗口进行添加边框 Obsidian 样式-专注标签页边框

熊猫别熬夜

Pkmer

更多

美化样式 CSS自定义

通过修改 Html 语法中的details语法的样式来使它更像一个评论信息。

Obsidian 样式 - 调整 Html 的 detail 样式为简单评论区 通过修改 Html 语法中的 <details>评论区</details> 语法的样式来使它更像一个评论信息。 如果 <details> 在一个段落中可以渲染包括图片甚至是嵌入文档的渲染： Obsidian 样式 - 调整 Html 的 detail 样式为简单评论区 Obsidian 样式 - 调整 Html 的 detail 样式为简单评论区 Obsidian 样式 - 调整 Html 的 detail 样

熊猫别熬夜

Pkmer

更多

美化样式 CSS自定义

修改悬浮预览框的大小

Obsidian样式：修改悬浮预览框的大小

熊猫别熬夜

Pkmer

更多

CSS美化 CSS自定义

Obsidian 外观：1.4 Properties 新特性如何在阅读模式下隐藏

新的 Obsidian 更新带来了很多惊喜，还有更强的稳定性。 但是一些老的示例库仓库，还有 snippets 片段就会失效 比如 BT 示例库中小伙伴就会提问，更新后出现了属性交互菜单影响展示的情况 image.png450 依然可以通过 cssClass 进行处理 在 snippets 下新建样式文件，并输入如下内容 保存成 后缀名.css，文件名大家随意 然后在 Obsidian 设置 -外观 中找到并打开 最后，在你需要隐藏的页面，新增 cssClass 属性，并输入 noprop，即可

OS

Pkmer

更多

大纲 缩进线

Obsidian样式：自定义大纲缩进线样式

大纲可以帮助我们简单梳理带有层级结构的框架，整理自己的思路概况。 但是默认样式的大纲线略微有些纤细，在深色主题下可能不够明显，除了通过彩色大纲线进行优化外，还可以优化本身的粗细来实现。 CSS /实时编辑模式/ .markdown-source-view.mod-cm6 .cm-indent::before { border-right: 1px solid var(--indentation-guide-color) !important; } /阅读模式/ .markdown-rendered.show-indentati

OS

Pkmer

更多